<template>
	<view class="content">
		<view class="header_warp">
			<!-- 顶部 -->
			<com-nav-bar class="nav_login" :navColor="navColor">
				<template>
					<view class="_nav" @click="navBack">
						<i class="iconfont icon-31fanhui1"></i>
					</view>
				</template>
			</com-nav-bar>
			<view class="inner row_center">
				<view class="search_warp">
					<image class="icon" src="../../static/search2x.png" mode="scaleToFill"></image>
					<input class="input_warp" type="text" v-model="serarch" @confirm="confirm"
						placeholder="搜索昵称、ID、房间" />
				</view>
				<view class="cancel" @click="navBack">
					取消
				</view>
			</view>
			<!-- 选项卡 -->
			<view class="tabs">
				<view class="_item" :key="item.id" :id="item.singId" :class="{active: (activeIndex == index)}"
					@click="change(item, index)" v-for="(item, index) in menuList">
					<view class="title">
						{{item.name}}
					</view>
				</view>
				<view class="_underline" :style="styleObject">
					<view class="indicator"></view>
				</view>
			</view>
		</view>
		<!-- 房间列表 -->
		<scroll-view :style="{height: scroll_height}" class="scroll_warp" @scrolltolower="scrolltolower"
			scroll-y="true">
			<view class="list_box row_center">
				<view class="_item_room row_center" @click="jumpHomepage(item)" v-for="(item, index) in list" :key="index">
					<view class="left row_center">
						<view class="icon" :class="{icon_user: activeIndex != 0}">
							<image class="img_val" :src="item.roomAvatar || item.avatar" mode="scaleToFill"></image>
						</view>
						<view class="info">
							<view class="name row_center">
								<text v-if="activeIndex == 0">{{item.roomTitle}}</text>
								<text v-else>{{item.nick}}</text>
								<image v-if="activeIndex != 0 && item.gender == 1" class="sex" src="../../static/man.png"
									mode="scaleToFill"></image>
									<image v-if="activeIndex != 0 && item.gender == 2" class="sex" src="../../static/women.png"
										mode="scaleToFill"></image>
							</view>
							<view class="id_val">
								ID:{{item.erbanNo}}
							</view>
						</view>
					</view>
					<view class="right row_center" v-if="activeIndex == 0">
						<image class="hot" src="../../static/hot2x.png" mode=""></image>
						<text>{{item.heat}}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" v-if="list.length > 0" :content-text="contentText" />
			<view class="nodata" v-if="list.length <= 0">
				<image class="nodata_img" src="../../static/nodata.png" mode="scaleToFill"></image>
				<view class="msg">
					暂无更多内容
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {mapState} from 'vuex';
	var timer = null;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				page: 1,
				pageSize: 20,
				scroll_height: 0,
				navColor: 'transparent',
				serarch: '',
				activeIndex: 0,
				menuList: [{
						name: '房间',
						sginId: 'room'
					},
					{
						name: '用户',
						sginId: 'user'
					}
				],
				list: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多...',
					contentrefresh: '加载中....',
					contentnomore: '暂无更多内容'
				},
			}
		},
		computed: {
			styleObject() {
				let _style = `transform: translateX(${this.activeIndex}00%)`
				return _style;
			},
			...mapState(['hasLogin', 'user', 'identity'])
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.tabs').boundingClientRect()
					query.exec(function(res) {
						console.log(res[0].top)
						var pxVal = uni.upx2px(130);
						console.log(pxVal)
						_this.scroll_height = resu.windowHeight - (res[0].top + pxVal) + 'px';
					})
					/* let height = resu.windowHeight - uni.upx2px(100)
					_this.swiperheight = height; */

				},
				fail: (res) => {}
			})
		},
		methods: {
			navBack() {
				uni.navigateBack()
			},
			scrolltolower() {
				if (this.status === 'noMore' || this.status === 'loading') {
					return;
				}
				this.status = 'loading';
				this.page++;
				timer = setTimeout(() => {
					if (this.activeIndex == 0) {
						this.searchRoom();
					} else {
						this.searchUser();
					}
				}, 500);
			},
			confirm() {
				console.log("开始搜索")
				this.page = 1;
				this.list = [];
				if (this.activeIndex == 0) {
					this.searchRoom();
				} else {
					this.searchUser();
				}
			},
			change(item, index) {
				this.activeIndex = index;
				if(this.serarch != '') {
					this.confirm();
				}
			},
			/* 搜索房间 */
			searchRoom() {
				if (this.serarch == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none'
					});
					return;
				}
				this.$api.searchRoom({
					key: this.serarch,
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code == 200) {
						let result = res.data;
						if (result.length >= this.pageSize) {
							this.status = 'more';
						} else {
							this.status = 'noMore';
						}
						if (result.length > 0) {
							this.list.push(...result);
						}
					}
				})
			},
			/* 搜索用户 */
			searchUser() {
				if (this.serarch == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none'
					});
					return;
				}
				this.$api.searchUser({
					key: this.serarch,
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code == 200) {
						let result = res.data;
						if (result.length >= this.pageSize) {
							this.status = 'more';
						} else {
							this.status = 'noMore';
						}
						if (result.length > 0) {
							this.list.push(...result);
						}
					}
					console.log(res);
				})
			},
			/* 跳转个人中心或者房间 */
			jumpHomepage(item) {
				if(!this.hasLogin) {
					uni.navigateTo({
					    url: '../login/login'
					});
					return;
				}
				if(this.activeIndex == 1) {// 跳转用户
					uni.navigateTo({
						url: '../homePage/homePage?type=other&uid=' + item.uid
					})
				}else if(this.activeIndex == 0) {
					let owner = (this.identity.uid + '' === item.uid + '') ? true : false;
					uni.navigateTo({
					    url: `/house/liveHouse/liveHouse?owner=${owner}&pub_ticket=1&roomId=${item.uid}`
					})
					
				}
				
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/iconfont/iconfont.css";

	@font-face {
		font-family: 'iconfont';
		src: url('~@/static/iconfont/iconfont.ttf');
	}

	@import './index.scss';
</style>
